<template>
	<view class="page">
		<Navbar iconColor="black" :showMenu="false" :showBack="true" bgc="#fff" :isDocument="true">
			<view class="navbarText">
				<text>评论({{$tools.calcPlayCount(totalComments)}})</text>
			</view>
		</Navbar>

		<view class="header">
			<image :src="header.coverImg" mode="aspectFill"></image>
			<view class="header-detail">
				<view class="name">
					<text>{{header.title}}</text>
					<text>{{header.creatorName}}</text>
				</view>
				<view class="more">
					<image src="/static/images/gd-g.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="comments" :style="{minHeight: screenHeight - navbarHeight - 220 + 'rpx'}">
			<Loading isFullScreen :active="loading" backgroundColor="transparent" text="loading..."></Loading>
			<view class="comments-header" :style="{ top: navbarHeight - 1 + 'rpx' }">
				<text class="active">评论区</text>
				<view class="tabs">
					<text :class="sortType == 99 ? 'active' : ''" @click="changeSortType(99)">推荐</text>
					<text :class="sortType == 2 ? 'active' : ''" @click="changeSortType(2)">最热</text>
					<text :class="sortType == 3 ? 'active' : ''" @click="changeSortType(3)">最新</text>
				</view>
			</view>

			<view class="commentsList">
				<view class="commentsItem" v-for="(item,index) in commentsList" :key="index">
					<view class="itemHeader">
						<image @click.stop="toUserDetail(item.user.userId)" :src="item.user.avatarUrl" mode="aspectFill" style="border-radius: 40rpx;"></image>
						<view class="itemHeaderDetail">
							<view class="left">
								<text @click.stop="toUserDetail(item.user.userId)">{{item.user.nickname}}</text>
								<view class="left-btm">
									<text>{{$tools.timestampToTime2(item.time)}}</text>
									<text v-if="item.tag.datas != null"> · {{item.tag.datas[0].text}}</text>
								</view>
							</view>
							<view class="right">
								<text>{{$tools.calcPlayCount(item.likedCount)}}</text>
								<image :src="item.liked ? '/static/images/prised-r.png' : '/static/images/prise-g.png'" mode="widthFix" @click="prise(item)"></image>
							</view>
						</view>
					</view>

					<view class="itemContent">
						<text @click="replyComment(item)">{{item.content}}</text>
						<view class="floorComment" v-if="item.showFloorComment.showReplyCount" @click="changeSubComments(item.commentId, item.showFloorComment.replyCount, item.user.nickname)">
							<text>{{item.showFloorComment.replyCount}}条回复</text>
							<image src="/static/images/more-bl.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<u-loadmore v-if="commentsList.length > 0" :status="loadMore" icon-type="flower" bg-color="#fff" :load-text="loadText" />
			</view>
		</view>
		<!-- 二级评论弹窗 -->
		<u-popup v-model="showFloorComment" mode="bottom" border-radius="40" :height="screenHeight - navbarHeight + 'rpx'"
		 @close="closePopup" :customStyle="customStyle">
			<Loading isFullScreen :active="subCommentLoading" backgroundColor="transparent" text="loading..."></Loading>
			<view class="sunCommentHeader">
				<image src="/static/images/back-b.png" mode="widthFix" @click="closePopup"></image>
				<text>回复({{subCommentNum}})</text>
			</view>

			<scroll-view scroll-y="true" @scrolltolower="loadMoreSubComments" @scroll="popupScroll" :style="{ height: screenHeight - navbarHeight + 'rpx', backgroundColor: '#f0f0f0' }">
				<view>
					<view v-if="subCommentLoading == false" class="commentsList" style="width:750rpx; padding-left: 30rpx; margin-top: 80rpx;padding-bottom: 0;">
						<view class="commentsItem">
							<view class="itemHeader">
								<image @click.stop="toUserDetail(item.user.userId)" :src="curSubComment.user.avatarUrl" mode="aspectFill" style="border-radius: 40rpx;"></image>
								<view class="itemHeaderDetail">
									<view class="left">
										<text @click.stop="toUserDetail(item.user.userId)">{{curSubComment.user.nickname}}</text>
										<view class="left-btm">
											<text>{{$tools.timestampToTime2(curSubComment.time)}}</text>
										</view>
									</view>
									<view class="right">
										<text>{{$tools.calcPlayCount(curSubComment.likedCount)}}</text>
										<image :src="curSubComment.liked ? '/static/images/prised-r.png' : '/static/images/prise-g.png'" mode="widthFix"
										 @click="prise(curSubComment)"></image>
									</view>
								</view>
							</view>

							<view class="itemContent" style="border-bottom: none;">
								<text>{{curSubComment.content}}</text>
							</view>
						</view>
					</view>

					<view class="commentsList" style="width:750rpx; padding-left: 30rpx; margin-top: 10rpx;">
						<view style="width: 750rpx;height: 90rpx;line-height: 90rpx;font-size: 32rpx;font-weight: 600;">
							<text>全部回复</text>
						</view>
						<view class="commentsItem" v-for="(item,index) in subCommentList" :key="index">
							<view class="itemHeader">
								<image @click.stop="toUserDetail(item.user.userId)" :src="item.user.avatarUrl" mode="aspectFill" style="border-radius: 40rpx;"></image>
								<view class="itemHeaderDetail">
									<view class="left">
										<text @click.stop="toUserDetail(item.user.userId)">{{item.user.nickname}}</text>
										<view class="left-btm">
											<text>{{$tools.timestampToTime2(item.time)}}</text>
										</view>
									</view>
									<view class="right">
										<text>{{$tools.calcPlayCount(item.likedCount)}}</text>
										<image :src="item.liked ? '/static/images/prised-r.png' : '/static/images/prise-g.png'" mode="widthFix"
										 @click="prise(item)"></image>
									</view>
								</view>
							</view>

							<view class="itemContent">
								<text @click="replyComment(item)">{{item.content}}</text>
							</view>
						</view>
						<u-loadmore v-if="subCommentList.length > 0" :status="loadMoreSubComment" icon-type="flower" bg-color="#fff"
						 :load-text="loadText" />
					</view>
				</view>
			</scroll-view>
		</u-popup>

		<view class="postComment">
			<u-input v-model="myComment" :focus="focus" @focus="focus=true" type="textarea" :fixed="true" :placeholder="placeholder"
			 height="70" :custom-style="inputStyle" :auto-height="true" />
			<text @click="postComment">发表</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Navbar from '@/components/navbar.vue'
	import Loading from '@/components/loading/loading.vue'
	import {
		getComments,
		getFloorComments,
		getSongDetail,
		priseComments,
		getSongListDetail,
		postComments
	} from '@/api/music.js'
	import {
		getVideoDetail,
		getMVDetail
	} from '@/api/video.js'
	export default {
		components: {
			Navbar,
			Loading
		},
		data() {
			return {
				type: '',
				// type对照表
				typeList: {
					'singleSong': 0,
					'mv': 1,
					'songList': 2,
					'album': 3,
					'fm': 4,
					'video': 5,
					'dynamic': 6
				},
				id: '',
				header: {
					coverImg: '',
					title: '',
					creatorName: '',
					creatorId: ''
				},
				loading: true,
				subCommentLoading: true,
				hasMore: '',
				totalComments: '',
				pageNo: 1,
				pageSize: 20,
				sortType: 99,
				cursor: '',
				commentsList: [],
				loadMore: 'loadmore',
				loadMoreSubComment: 'loadmore',
				// 是否显示二级评论弹窗
				showFloorComment: false,
				// 最后一条二级评论的时间
				floorTime: '',
				// 当前二级评论数
				subCommentNum: '',
				// 当前二级评论id
				subCommentId: '',
				// 当前被展开的二级评论
				curSubComment: {
					user: {
						avatarUrl: ''
					}
				},
				// 二级评论列表
				subCommentList: [],
				myComment: '',
				replyId: '',
				focus: false,
				placeholder: '这一次也许就是你上热评了',
				// 下拉刷新组件文本
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				customStyle: {
					backgroundColor: '#f0f0f0'
				},
				inputStyle: {
					width: '570rpx'
				}
			}
		},
		onLoad(data) {
			this.loading = true
			this.type = this.typeList[data.type]
			this.id = data.id
			this.getHeader()
			this.getComments()
		},
		watch: {},
		onPageScroll() {
			this.focus = false
		},
		computed: {
			...mapState(['screenHeight', 'navbarHeight'])
		},
		onReachBottom() {
			if (this.loadMore == 'nomore') return
			this.pageNo++
			this.getComments()
		},
		methods: {
			// 获取评论
			getComments() {
				this.loadMore = 'loading'
				getComments(this.id, this.type, this.pageNo, this.pageSize, this.sortType, this.cursor).then(res => {
					this.totalComments = res.data.totalCount
					this.cursor = res.data.cursor
					this.hasMore = res.data.hasMore
					this.commentsList.push(...res.data.comments)
					this.loadMore = res.data.hasMore ? 'loadmore' : 'nomore'
					this.loading = false
				})
			},
			// 切换排序
			changeSortType(type) {
				if (type == this.sortType) return
				this.loading = true
				this.sortType = type
				this.pageNo = 1
				this.commentsList = []
				this.getComments()
			},
			// 获取头部卡片内容
			getHeader() {
				switch (this.type) {
					case 0:
						this.getSingerSongDetail()
						break
					case 1:
						this.getMVDetail()
						break
					case 2:
						this.getSongListDetail()
						break
					case 3:
						this.getAlbumDetail()
						break
					case 4:
						this.getFMDetail()
						break
					case 5:
						this.getVideoDetail()
						break
				}
			},
			// 点赞评论
			prise(item) {
				item.liked = !item.liked
				item.liked ? item.likedCount++ : item.likedCount--
				priseComments(this.id, item.commentId, this.type, item.liked ? 0 : 1).then(res => {
					// item.liked = !item.liked
					// item.liked ? item.likedCount ++ : item.likedCount --
				})
			},
			// 切换二级评论
			changeSubComments(id, num, name) {
				this.subCommentId = id
				this.showFloorComment = true
				this.subCommentNum = num
				this.subCommentList = []
				this.curSubComment = {}
				this.subCommentLoading = true
				this.floorTime = ''
				this.replyId = id
				this.placeholder = `回复${name}:`
				this.getFloorComments(id)
			},
			// 加载更多二级评论
			loadMoreSubComments() {
				if (this.loadMoreSubComment == 'nomore' || this.loadMoreSubComment == 'loading') return
				this.loadMoreSubComment = 'loading'
				this.getFloorComments(this.subCommentId)
			},
			// 获取二级评论
			getFloorComments(id) {
				this.floorTime = this.subCommentList.length > 0 ? this.subCommentList[this.subCommentList.length - 1].time : ''
				getFloorComments(id, this.id, this.type, 10, this.floorTime).then(res => {
					this.subCommentLoading = false
					if (res.data.comments.length > 0) {
						if (JSON.stringify(this.curSubComment) == '{}') {
							this.curSubComment = res.data.ownerComment
						}
						this.subCommentList = [...this.subCommentList, ...res.data.comments]
						this.loadMoreSubComment = 'loadmore'
					} else {
						this.loadMoreSubComment = 'nomore'
					}
				})
			},
			// 发表|回复评论
			postComment() {
				if (this.myComment == '') return
				if (this.replyId == '') {
					postComments(this.id, this.type, '', 1, this.myComment).then(res => {
						this.myComment = ''
						uni.showToast({
							title: '发表成功',
							icon: 'none'
						})
					})
				} else {
					postComments(this.id, this.type, this.replyId, 2, this.myComment).then(res => {
						this.myComment = ''
						this.replyId = ''
						this.placeholder = '这一次也许就是你上热评了'
						uni.showToast({
							title: '回复成功',
							icon: 'none'
						})
					})
				}

			},
			// 设置回复评论信息
			replyComment(item) {
				this.placeholder = `回复${item.user.nickname}:`
				this.replyId = item.commentId
				// this.$refs.input.focus = true
				this.focus = !this.focus
			},
			// 跳转用户主页
			toUserDetail(id) {
				uni.navigateTo({
					url: `/pages/mine/userDetail?id=${id}`
				})
			},
			// 二级评论弹窗关闭时触发
			closePopup() {
				this.showFloorComment = false
				this.replyId = ''
				this.placeholder = '这一次也许就是你上热评了'
			},
			// 二级评论列表滑动时触发
			popupScroll() {
				this.focus = false
			},
			// 获取单曲信息
			getSingerSongDetail() {
				getSongDetail(this.id).then(res => {
					this.header = {
						coverImg: res.data.songs[0].al.picUrl,
						title: res.data.songs[0].name,
						creatorName: res.data.songs[0].ar[0].name,
						creatorId: res.data.songs[0].ar[0].id
					}
				})
			},
			// 获取mv信息
			getMVDetail() {
				getMVDetail(this.id).then(res => {
					this.header = {
						coverImg: res.data.cover,
						title: res.data.name,
						creatorName: res.data.artists[0].name,
						creatorId: res.data.artists[0].id
					}
				})
			},
			// 获取歌单信息
			getSongListDetail() {
				getSongListDetail(this.id).then(res => {
					this.header = {
						coverImg: res.data.playlist.coverImgUrl,
						title: res.data.playlist.name,
						creatorName: res.data.playlist.creator.nickname,
						creatorId: res.data.playlist.creator.userId
					}
				})
			},
			// 获取专辑信息
			getAlbumDetail() {
				getSongDetail(this.id).then(res => {
					this.header = {
						coverImg: res.data.songs[0].al.picUrl,
						title: res.data.songs[0].name,
						creatorName: res.data.songs[0].ar[0].name,
						creatorId: res.data.songs[0].ar[0].id
					}
				})
			},
			// 获取FM信息
			getFMDetail() {
				getSongDetail(this.id).then(res => {
					this.header = {
						coverImg: res.data.songs[0].al.picUrl,
						title: res.data.songs[0].name,
						creatorName: res.data.songs[0].ar[0].name,
						creatorId: res.data.songs[0].ar[0].id
					}
				})
			},
			// 获取视频信息
			getVideoDetail() {
				getVideoDetail(this.id).then(res => {
					this.header = {
						coverImg: res.data.coverUrl,
						title: res.data.title,
						creatorName: res.data.creator.nickname,
						creatorId: res.data.creator.userId
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbarText {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		color: #000;
		font-size: 34rpx;
		font-weight: bolder;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 200rpx;
		padding: 0 30rpx;
		background-color: #fff;

		.header-detail {
			display: flex;
			align-items: center;
			width: 520rpx;
			height: 150rpx;

			.name {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 420rpx;
				height: 150rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				text {
					&:first-child {
						font-size: 34rpx;
						font-weight: 600;
						margin-bottom: 5rpx;
					}

					&:last-child {
						font-size: 30rpx;
						margin-top: 5rpx;
						color: #4f7daf;
					}
				}
			}

			.more {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 150rpx;
				height: 150rpx;

				image {
					width: 40rpx;
				}
			}
		}

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
		}
	}

	.comments {
		position: relative;
		width: 750rpx;
		padding: 0 0 0 30rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.comments-header {
			position: sticky;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 720rpx;
			padding-right: 30rpx;
			height: 80rpx;
			background-color: #fff;
			z-index: 100;

			.tabs {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 210rpx;
				height: 80rpx;
				color: #666;
			}

			.active {
				color: #000 !important;
				font-weight: bold !important;
			}
		}

	}

	.commentsList {
		width: 720rpx;
		background-color: #fff;
		padding-bottom: 100rpx;

		.commentsItem {
			width: 720rpx;
			margin-bottom: 30rpx;
			background-color: #fff;

			.itemHeader {
				display: flex;
				width: 720rpx;
				padding-right: 30rpx;
				height: 80rpx;

				.itemHeaderDetail {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 590rpx;
					height: 80rpx;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 400rpx;
						height: 80rpx;

						text {
							color: #656565;
							font-size: 27rpx;
							height: 27rpx;
							margin-bottom: 2rpx;
						}

						.left-btm {
							width: 400rpx;
							height: 20rpx;
							margin-top: 2rpx;

							text {
								&:first-child {
									font-size: 20rpx;
									color: #ccc;
								}

								&:last-child {
									font-size: 20rpx;
									color: #989898;
									margin-left: 6rpx;
								}
							}
						}
					}

					.right {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						width: 190rpx;
						height: 80rpx;

						text {
							color: #989898;
							font-size: 26rpx;
						}

						image {
							width: 35rpx;
							margin-left: 8rpx;
						}
					}
				}

				image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
				}
			}

			.itemContent {
				width: 620rpx;
				padding: 20rpx 40rpx 20rpx 0;
				margin-left: 100rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				.floorComment {
					display: flex;
					align-items: center;
					width: 160rpx;
					height: 50rpx;

					text {
						font-size: 24rpx;
						color: #4f7daf;
					}

					image {
						width: 20rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
	}

	.sunCommentHeader {
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		background-color: #fff;
		z-index: 100;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.postComment {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		padding: 0 30rpx;
		background-color: rgba(255, 255, 255, .98);
		border-top: 1rpx solid #eee;
		z-index: 10000000;

		text {
			width: 120rpx;
			text-align: center;
			color: #888;
		}
	}
</style>
